import { baseCanvas } from "./baseCanvas";
// 装饰组件的属性、样式
export const decorateAttrsStyles = (
	// is7Title 装饰7
	opts = { isReverse: false, isDur: false, durTime: 6, isScanDur: false, isHaloDur: false, is7Title: false },
	wh,
	xy
) => {
	const { isReverse, isDur, durTime, isScanDur, isHaloDur, is7Title } = opts;
	return {
		// 属性(键名与右侧面板的tab的value保持一致)
		attrs: {
			...(is7Title && { title: '装饰名称' })
		},
		// 修改属性需要用到的组件
		attrsMap: {
			...(is7Title && {
				title: {
					label: '装饰名称',
					cpn: 'input'
				},
			})
		},
		// 样式(键名与右侧面板的tab的value保持一致)
		styles: {
			color: ["#4fd2dd", "#235fa7"],
			...(isReverse && { reverse: false }),
			...(isDur && { dur: durTime }),
			...(isScanDur && { scanDur: 3 }),
			...(isHaloDur && { haloDur: 2 }),
			...(is7Title && { fontSize: 14, fontColor: '#333333' })
		},
		// 修改样式需要用到的组件
		stylesMap: {
			color: {
				label: "装饰颜色",
				subLabel: ["颜色一", "颜色二"],
				cpn: "colorPicks",
			},
			...(isReverse && {
				reverse: {
					label: "反转",
					cpn: "switch",
				},
			}),
			...(isDur && {
				dur: {
					label: "单次动画时长",
					cpn: "inputNumber",
				},
			}),
			...(isScanDur && {
				scanDur: {
					label: "扫描动画时长",
					cpn: "inputNumber",
				},
			}),
			...(isHaloDur && {
				haloDur: {
					label: "光晕动画时长",
					cpn: "inputNumber",
				},
			}),
			...(is7Title && {
				fontSize: {
					label: "字体大小",
					cpn: "inputNumber",
				},
				fontColor: {
					label: "字体颜色",
					cpn: "colorPick",
				}
			}),
		},
		...baseCanvas(wh, xy, 0),
	};
};
